<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/base.css">
    <link rel="stylesheet" href="../CSS/commonhead.css">
    <link rel="stylesheet" href="../CSS/guoalbum.css">
    <link rel="stylesheet" href="../mouse.css">
</head>

<body>
    <script src="../JS/commonhead.js"></script>
    <div class="cursor"></div>
    <div class="guoalbum_all w">
        <div class="guoalbum_title">
            <a href="../HTML/albumall.html"></a>
        </div>
        <div class="album_content">
            <div class="album_contenttop">
                <img src="../images/guo-album/guo album/0-1.png" alt="">
                <img src="../images/guo-album/guo album/0-2.png" alt="">
                <a href="javascript:;"><img src="../images/all-album/guoyu zhuanqu.png" alt=""></a>
            </div>
            <div class="album_conbottom">
                <div>
                    <span class="albumspan"><i class="information">孤勇者</i><em class="date">2021-11-08</em><audio
                            src="https://webfs.ali.kugou.com/202205060228/d31faf71c88717188ecebbf7099b2ef3/KGTX/CLTX001/f2e7e2ea86744b6511963a069c7ccb19.mp3"></audio><img
                            src="../images/guo-album/guo album/1-1.png" alt=""></span>
                    <span class="albumspan"><i class="information">不想放手</i><em class="date">2008-06-30</em><audio
                            src="https://webfs.tx.kugou.com/202205060822/8cd599693f1f6e8000a3ecaf76287ae5/KGTX/CLTX001/291e9f9cbd9799ea9a09f3df56ad4316.mp3"></audio><img
                            src="../images/guo-album/guo album/1-2.png" alt=""></span>
                    <span class="albumspan"><i class="information">孤勇者</i><em class="date">2021-11-08</em><audio
                            src="https://webfs.ali.kugou.com/202205060826/0581e1cf57a055d269a4022eefa557e7/KGTX/CLTX001/fcd01a5bb42dd4cffd294bb7376a8e0b.mp3"></audio><img
                            src="../images/guo-album/guo album/1-3.png" alt=""></span>
                    <span class="albumspan"><i class="information">孤勇者</i><em class="date">2021-11-08</em><audio
                            src="https://webfs.ali.kugou.com/202205060826/36ca60fdf30b886bd8032687ee40f02a/KGTX/CLTX001/eb19dd8436ce09ee4c0eca80e6ce21af.mp3"></audio><img
                            src="../images/guo-album/guo album/1-4.png" alt=""></span>
                </div>
                <div>
                    <div class="line2word">
                        <span class="front"><img src="../images/guo-album/guo album/2-1.png" alt=""></span>
                        <span class="back"><img src="../images/all-album/geci effect/6-2d.png" alt=""></span>
                    </div>
                    <span class="albumspan"><i class="information">孤勇者</i><em class="date">2021-11-08</em><img
                            src="../images/guo-album/guo album/2-2.png" alt=""></span>
                    <span class="albumspan"><i class="information">孤勇者</i><em class="date">2021-11-08</em><img
                            src="../images/guo-album/guo album/2-3.png" alt=""></span>
                    <span class="albumspan"><i class="information">上五楼的快活</i><em class="date">2009-09-23</em><img
                            src="../images/guo-album/guo album/2-4.png" alt=""></span>

                </div>
                <div>
                    <span class="albumspan"><i class="information">孤勇者</i><em class="date">2021-11-08</em><img
                            src="../images/guo-album/guo album/3-1.png" alt=""></span>
                    <span class="albumspan"><i class="information">孤勇者</i><em class="date">2021-11-08</em><img
                            src="../images/guo-album/guo album/3-2.png" alt=""></span>
                    <span class="albumspan"><i class="information">孤勇者</i><em class="date">2021-11-08</em><img
                            src="../images/guo-album/guo album/3-3.png" alt=""></span>
                    <span class="albumspan"><i class="information">七</i><em class="date">2003-11-01</em><img
                            src="../images/guo-album/guo album/3-4.png" alt=""></span>
                </div>
                <div>
                    <span class="albumspan"><i class="information">孤勇者</i><em class="date">2021-11-08</em><img
                            src="../images/guo-album/guo album/4-1.png" alt=""></span>
                    <span><img src="../images/guo-album/guo album/4-2.png" alt=""></span>
                    <span class="albumspan"><i class="information">放&披风</i><em class="date">2017-05-18</em><img
                            src="../images/guo-album/guo album/4-3.png" alt=""></span>
                    <span class="albumspan"><i class="information">孤勇者</i><em class="date">2021-11-08</em><img
                            src="../images/guo-album/guo album/4-4.png" alt=""></span>
                </div>
                <div>
                    <div class="line5word">
                        <span class="front"><img src="../images/guo-album/guo album/5-1.png" alt=""></span>
                        <span class="back"><img src="../images/all-album/geci effect/9-2d.png" alt=""></span>
                    </div>
                    <span class="albumspan"><i class="information">孤勇者</i><em class="date">2021-11-08</em><img
                            src="../images/guo-album/guo album/5-2.png" alt=""></span>
                    <span class="albumspan"><i class="information">孤勇者</i><em class="date">2021-11-08</em><img
                            src="../images/guo-album/guo album/5-3.png" alt=""></span>
                    <span class="albumspan"><i class="information">THE 1ST ELEVEN YEARS 然后呢</i><em
                            class="date">2008-01-01</em><img src="../images/guo-album/guo album/5-4.png" alt=""></span>
                </div>
            </div>
        </div>
    </div>
    <script src="../JS/footer.js"></script>
    <script>
        let albumspan = document.querySelectorAll('.albumspan');
        for (let i = 0; i < albumspan.length; i++) {
            albumspan[i].addEventListener('click', function () {
                let musicall = document.querySelectorAll('audio');
                for (let x = 0; x < musicall.length; x++) {
                    musicall[x].pause();
                    console.log(musicall[x]);
                    console.log(musicall[x].paused);
                }
                let music = albumspan[i].querySelector('audio');
                music.play();
                console.log(musicall[i].paused);

            })
            albumspan[i].addEventListener('mouseover', function () {
                let albumi = albumspan[i].querySelector('i');
                let albumem = albumspan[i].querySelector('em');
                albumi.style.display = 'block';
                albumem.style.display = 'block';
                albumi.style.animation = "appear 500ms";
                albumem.style.animation = "appear 500ms";
            })
            albumspan[i].addEventListener('mouseleave', function () {
                let albumi = albumspan[i].querySelector('i');
                let albumem = albumspan[i].querySelector('em');
                albumi.style.display = 'none';
                albumem.style.display = 'none';
                albumi.style.animation = "disappear 500ms";
                albumem.style.animation = "disappear 500ms";
            })
        }
    </script>
    <script src="../mouse.js"></script>
</body>

</html>